<template>
    <div>
        <div class="menuDescriptionBox">
            <i class="fa fa-question-circle-o fa-lg"></i> <span class="menuDescTitle">应用服务管理说明：</span>
            <div class="menuDesc">该管理中展示了您应用的各个服务层的状态，由于应用基于 <a href="http://www.ed100.cn" target="_blank">EasyD集合开发框架</a> 进行开发，所以采用分层架构原理，用户无需关心每层的具体含义，只需保证各个层如果均处于启动正常运行状态，则表示您的应用也处于正常的运行状态，如有某层处于停止状态，您的应用则也将出现停止</div>
        </div>
        <div class="applicationServiceStatusBox">
            <div class="applicationServiceStatusItem" v-for="item in serverData">
                <div class="applicationServiceStatusItem_left">
                    <div class="applicationServiceStatusItem_name" v-if="item.cmac_type == 0"><b>原子层</b></div>
                    <div class="applicationServiceStatusItem_name" v-if="item.cmac_type == 1"><b>聚合层</b></div>
                    <div class="applicationServiceStatusItem_name" v-if="item.cmac_type == 2"><b>管理层</b></div>
                    <div class="applicationServiceStatusItem_status" style="color:green" v-if="item.serverStatus == '1'"><i class="fa fa-circle fa-lg"></i><br/><br/>运行中</div>
                    <div class="applicationServiceStatusItem_status" style="color:red" v-if="item.serverStatus == '0'"><i class="fa fa-circle fa-lg"></i><br/><br/>已停止</div>
                </div>
                <div class="applicationServiceStatusItem_right">
                    <div class="applicationServiceLayer_info"><b>服务名称：</b>{{item.cmac_name}}</div>
                    <div class="applicationServiceLayer_info"><b>私有地址：</b>http://{{item.cmac_ip}}:{{item.cmac_in_port}}</div>
                    <div class="applicationServiceLayer_info"><b>所属网络：</b>{{item.cmac_network}}</div>
                    <div class="applicationServiceLayer_info"><b>公网端口：</b>{{item.cmac_out_port}}</div>
                    <div class="applicationServiceLayer_action">
                        <el-button type="success" @click="handleStartServer(item.cmac_name)">启动服务</el-button>
                        <el-button type="danger"  @click="handleStopServer(item.cmac_name)">停止服务</el-button>
                        <el-button type="warning" @click="handleRestartServer(item.cmac_name)">重启服务</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {

            }
        },
        //初始化函数
        mounted() {

            this.initData('init');

        },
        //计算属性
        computed: {
            ...mapState({
                serverData : state => state.ApplicationServiceManagerModule.serverData
             })
        },
        //组件方法
        methods: {

            handleStartServer(serverName){

                var params = {
                    name : serverName
                }

                this.$myLoading.startLoading()
                this.$http.postHttp(
                    this.$API.dockerStartApplicationContainer,
                    params,
                    rs => {
                        this.$myLoading.endLoading()
                        this.$myPop.SuccessMessage()
                        this.initData('update');
                    }
                )

                
            },
            handleStopServer(serverName){

                var params = {
                    name : serverName
                }

                this.$myPop.confirmBox("确认操作","停止该服务会导致应用无法进行使用，确定要这么做吗？",()=>{

                    this.$myLoading.startLoading()
                    this.$http.postHttp(
                        this.$API.dockerStopApplicationContainer,
                        params,
                        rs => {
                            this.$myLoading.endLoading()
                            this.$myPop.SuccessMessage()
                            this.initData('update');
                        }
                    )

                })

            },
            handleRestartServer(serverName){

                var params = {
                    name : serverName
                }

                this.$myLoading.startLoading()
                this.$http.postHttp(
                    this.$API.dockerRestartApplicationContainer,
                    params,
                    rs => {
                        this.$myLoading.endLoading()
                        this.$myPop.SuccessMessage()
                        this.initData('update');
                    }
                )

            },
            initData(type){

                if(type == 'init'){
                    this.$myLoading.startLoading()
                }
                
                this.$http.getHttp(
                    this.$API.userGetApplicationContainerDetail + "/appid/" + this.$route.query.appid,
                    rs => {

                        if(type == 'init'){
                            this.$myLoading.endLoading()
                        }

                        this.$store.commit('ApplicationServiceManagerModule/updateServerData',rs)

                    }
                )
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.applicationServiceStatusBox {
    width 100%
    height 200px

    .applicationServiceStatusItem {
        width 100%
        height 100%
        border 1px solid #eee
        border-radius 5px
        margin-bottom 15px
        position relative

        .applicationServiceStatusItem_right {
            position absolute
            left 180px
            top 0px
            bottom 0px
            right 0px
            padding 15px
            box-sizing border-box

            .applicationServiceLayer_info {
                width auto 
                height 20px
                color #666
                font-size 14px
                margin-bottom 10px
            }

            .applicationServiceLayer_action {
                width 100%
                height 40px 
                padding-top 12px
                margin-top 10px
                border-top 1px solid #eee 
            }
        }

        .applicationServiceStatusItem_left {
            width 180px
            height 100%
            background #eee
            float left

            .applicationServiceStatusItem_name {
                width 100%
                height 30px
                margin-top 30px
                text-align center
                font-size 20px
            }

            .applicationServiceStatusItem_status {
                width 100% 
                text-align center
                font-size 20px
                margin-top 20px
            }
        }
    }
}
</style>